<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn color="white"></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_personal.personal_center }}</view>
				<view v-if="userInfo.userId !== userId" class="flex-center">
					<view class="follow-btn u-m-r-14 u-f-24 u-lh-34 u-text-center flex-center-center" @click="updateInfo">
						<view>{{ lang_common[dataInfo.hasFollowed ? 'cancelFollow' : 'follow'] }}</view>
					</view>
					
					<u-icon name="info-circle" color="#FFFFFF" size="48" @click="jumpUrl(`/pages/common/report/report?userId=${ dataInfo.userId }`)"></u-icon>
				</view>
				<view v-else class="flex-center-center linecamp-1">
					<view class="follow-btn u-m-r-14 u-f-24 u-lh-34 clear-flex linecamp-1" @click="jumpUrl(`/pages/user/personal/setting/setting`)">
						<view>{{ lang_personal.editInfo }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="header-card color-white">
			<!-- 头像 -->
			<view class="flex-center-center u-p-t-10">
				<view class="u-radius-88 personal-avatar clear-flex">
					<x-image :src="showImage(dataInfo.avatar, 'logo')" preview/>
				</view>
			</view>
			
			<view class="personal-message u-m-t-22">
				<view :class="[`u-f-38 u-lh-52 font-medio u-text-center`]" >{{ dataInfo.nick || '' }}</view>
				<view :class="['u-m-t-12 flex-center-center']">
					<view class="flex-center">
						<view class="flex-center clear-flex tag-container">
							<u-icon :name="dataInfo.sex === 1 ? 'man'  : 'woman'" color="#FFFFFF"></u-icon>
							<view class="u-m-l-10 u-f-24 u-lh-34 font-medio">{{ lang_common[dataInfo.sex === 1 ? 'male' : 'famale'] }}</view>
						</view>
						<view class="u-m-l-16 flex-center clear-flex tag-container">
							<image src="@/static/image/common/position_white.png" style="width: 24rpx; height: 24rpx;"></image>
							<view class="u-m-l-10 u-f-24 u-lh-34 font-medio">{{ formatAddress(userInfo) || 'UNKNOWN' }}</view>
						</view>
					</view>
				</view>
				<view class="u-m-t-24 u-f-28 u-lh-40 u-text-center">{{ dataInfo.desc || '' }}</view>
			</view>
			
			<view class="personal-nav u-m-t-24">
				<view style="padding: 0 40rpx;">
					<view
					class="nav-container flex-center-between"
					style="padding: 20rpx 40rpx;height: 126rpx"
					>
						<view
						v-for="(item, index) in navs"
						:key="index"
						class="u-text-center linecamp-1"
						style="position: relative; z-index: 10198;"
						@click="jumpAction(item)"
						>
							<view class="font-bold" style="color: #333333;">{{ dataInfo[item.key] || 0 }}</view>
							<view class="u-m-t-4 u-f-24 u-lh-34 linecamp-1" style="color: #7D7D7D;">{{ lang_common[item.labelKey] }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view  class="header-nav-container">
			<view class="bg-white" style="padding: 14rpx 136rpx 10rpx">
				<view class="flex-center-between">
					<view
					v-for="(item, index) in tabs"
					:key="index"
					:class="['tab-item u-f-44 u-lh-60', index > 0 ? 'u-m-l-54' : '']"
					@click="changeTabIndex(index)"
					>
						<view :class="['linecamp-1', tabIndex === index ? 'font-medio u-f-38' : 'color-grew u-f-34']">{{ lang_common[item.key] }}</view>
						<view v-if="tabIndex === index" class="tab-item-line"></view>
					</view>
				</view>
			</view>
		</view>
		
		<view>
			<mescroll-body height="calc(100vh - 378rpx - var(--status-bar-height))" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view style="padding: 20rpx 30rpx 0;">
					<template v-if="tabIndex !== 2">
						<view class="flex-between ">
							<view
							v-for="(list, lindex) in groups"
							:key="lindex"
							:class="[lindex > 0 ? 'u-p-l-9' : 'u-p-r-9']"
							style="width: 100%;">
								<view
								v-for="(item, index) in list"
								:key="index"
								@click="jumpUrl(`/pages/other/comment/note?notesId=${ item.notesId }`)">
									<dynamic-card :item="item"></dynamic-card>
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view style="padding: 0 10rpx;">
							<view v-for="(item, index) in dataList" :key="index" class="u-m-t-36"
								@click="jumpUrl(`/pages/other/comment/note?notesId=${ item.notesId }&type=shop`)">
								<view class="flex-center">
									<view class="u-avatar-60 clear-flex" style="width: 88rpx; height: 88rpx;">
										<x-image :src="showImage(item.avatar, 'logo')"/>
									</view>
									<view class="flex-between flex-column u-m-l-26">
										<view class="u-f-32 u-lh-40">{{ item.nick || '' }}</view>
										<view class="u-m-t-4 flex-center u-f-24 u-lh-34">{{ item.createTime || '' }}</view>
									</view>
								</view>
								<view class="u-m-t-18 u-f-28 u-lh-40 linecamp-2">{{ item.content || '' }}</view>
							</view>
						</view>
					</template>
				</view>
			</mescroll-body>
			<!-- 留空 -->
			<view style="height: 200rpx"></view>
		</view>
	</view>
</template>

<script>
	import waterfall from '@/utils/waterfall.js'
	import { userDetail, userNotesAndCommentPage } from '@/api/user.js'
	import { notesPage } from '@/api/user/notes.js'
	import { commentUserNotesPage } from '@/api/user/comment.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			// 初始化个人navs信息
			let navs = [
				{ key: 'fansCount', labelKey: 'fans', label: '粉丝', page: '/pages/user/personal/followFans/followFans?type=fans' },
				{ key: 'followCount', labelKey: 'follow', label: '关注', page: '/pages/user/personal/followFans/followFans?type=follow' },
				{ key: 'accessCount', labelKey: 'allBrowse', label: '总浏览量', page: '' },
				{ key: 'notesAccessCount', labelKey: 'noteBrowse',  label: '笔记浏览', page: '' }]
			let tabs = [
				{ key: 'dynamic', label: '动态' },
				{ key: 'note', label: '笔记' },
				{ key: 'evaluate', label: '评价' }]
			return {
				navs,
				tabs,
				tabIndex: 0,
				timer: null,
				notes: [],
				
				userId: '',
				dataInfo: {},
				dataList: [],
				
				leftRightHeight: [0, 0],
				groups: [[], []]
			}
		},
		onShow() {
			if (this.userId) {
				this.initInfo()
			}
		},
		onLoad({ userId }) {
			this.userId = Number(userId)
			this.initInfo()
			if(this.userId !==  this.userInfo.userId) {
				this.actionAction(6, { userId })
			}
		},
		methods: {
			// 导航触发后
			changeTabIndex(index = 0) {
				this.tabIndex = index
				let domlist = ['header', 'header-card']
				domlist = domlist.map(item => {
					return this.query('.' + item)
				})
				Promise.all(domlist).then((res) => {
					let height = 0
					res.map(item => {
						if (item) {
							height += item.height
						}
					})
					let scrollObj = {}
					if (plus.os.name == "iOS") {
						scrollObj.duration = 0
					}
					uni.pageScrollTo({
						scrollTop: height - uni.upx2px(98) - this.status_bar_height,
						...scrollObj
					})
					clearTimeout(this.timer)
					this.timer = setTimeout(() => {
						clearTimeout(this.timer)
						this.downCallback(1)
					}, 1000)
				})
			},
			// 关注触发
			updateInfo() {
				this.actionAction(2, this.dataInfo).then((status) => {
					if (status) {
						this.initInfo()
					}
				})
			},
			jumpAction(item) {
				this.jumpUrl(`${item.page}&userId=${ this.userId }&nick=${ this.dataInfo.nick }`)
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			async upCallback(page) {
				let node = this.$refs['mescrollRef']
				this.getList(page).then(res => {
					if (!res.list) return 
					
					if (this.tabIndex !== 2) {
						if (page.num == 1) {
							this.groups = [[], []]
							this.leftRightHeight = [0, 0]
						}; //如果是第一页需手动制空列表
						waterfall({ hs: this.leftRightHeight, list: res.list, key: 'imgUrls' }, (hs, e) => {
							node && node.mescroll.endSuccess(res.list.length);
							this.leftRightHeight = hs
							this.groups = [[...this.groups[0], ...e[0]], [...this.groups[1], ...e[1]]]
						})
					} else {
						node && node.mescroll.endSuccess(res.list.length);
						if (page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
						this.dataList = this.dataList.concat(res.list); //追加新数据
					}
					
				}).catch((e) => {
					node && node.mescroll.endErr();
				})
			},
			downCallback() {
				let node = this.$refs['mescrollRef']
				node && node.mescroll.resetUpScroll()
			},
			// 聚合接口
			getList(page) {
				return new Promise(async (resolve, reject) => {
					let queryObj = { pageNumber: page.num, pageSize: page.size, userId: this.userId }
					if (this.tabIndex === 0) {
						// 动态
						resolve(userNotesAndCommentPage(queryObj))
					} else if (this.tabIndex === 1) {
						// 笔记
						resolve(notesPage(queryObj))
					} else {
						// 评价
						resolve(commentUserNotesPage(queryObj))
					}
				})
			},
			// 初始化详情
			initInfo() {
				userDetail({ userId: this.userId }).then((result) => {
					result.userExtend && (result = { ...result, ...result.userExtend })
					this.dataInfo = {...result}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 10200;
		width: 750rpx;
		color: #FFFFFF;
		background: linear-gradient(to right, #263249 0%, #4E464B 100%, #4E464B 100%);
		
		&-card {
			background: linear-gradient(to right, #263249 0%, #4E464B 100%, #4E464B 100%);
		}
		
		&-nav-container {
			position: sticky;
			top: calc(var(--status-bar-height) + 98rpx);
			left: 0;
			z-index: 10201
		}
	}
	
	.follow-btn {
		width: 114rpx;
		height: 46rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 100rpx;
	}
	
	.personal {
		&-avatar {
			width: 176rpx;
			height: 176rpx;
			border: 4rpx solid #FFFFFF;
			background-color: #f9f9f9;
			border-radius: 200rpx;
			overflow: hidden;
		}
		
		&-message {
			width: 100%;
		}
		
		&-nav {
			position: relative;
			width: 100%;
			
			.font-medio {
				color: #333333;
				font-size: 38rpx;
				font-weight: 600;
			}
		}
		
		&-nav::after {
			content: '';
			display: block;
			position: absolute;
			top: 78rpx;
			z-index: -1;
			width: 100vw;
			height: 140rpx;
			background-color: #ffffff;
		}
		
	}
	.tab-item {
		position: relative;
		top: 0;
		left: 0;
		
		&-line {
			position: absolute;
			bottom: -10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 36rpx;
			height: 8rpx;
			background: linear-gradient(to right, #F94404 0%, #FD164F 100%);
			box-sizing: 0 4rpx 8rpx 0 #FD164F;
			border-radius: 22rpx;
		}
	}
	
	.nav-container {
		background-color: #FFFFFF;
		box-shadow: 0 4rpx 14rpx 0 rgba(0,0,0,0.05);
		border-radius: 8rpx;
		border-radius: 10rpx
	}
	
	.tag-container {
		padding: 6rpx 16rpx;
		background-color: #36343C;
		border-radius: 100rpx;
	}
</style>
